<template>
	<div class="check-page">
		<top-header title="购物车"></top-header>
		<payCheck v-if="false" :isShop="true" :order_id="order_id" />
		<div v-show="valid_goods_list.length !== 0" v-for="item of valid_goods_list" :key="item.id">
			<div class="display">
				<div class="title font-size-14 font-weight-500">{{ `${item.title_name}&nbsp;>` }}</div>
			</div>
			<div class="good-card">
				<van-checkbox-group v-model="valid_result" :ref="`checkboxGroup${item.id}`">
					<van-cell-group :border="false">
						<van-cell
							class="good-card-cell"
							:border="false"
							v-for="item_good in item.goods"
							clickable
							:key="item_good.id"
							@click="validToggle(item_good.id)"
							center
						>
							<template #title>
								<van-checkbox :name="item_good.id" checked-color="black" ref="checkboxes" />
							</template>
							<template v-slot:default>
								<div class="card-intro">
									<van-card :title="item_good.name">
										<template #thumb>
											<div>
												<van-image width="100%" height="100%" fit="contain" :src="item_good.img" />
											</div>
										</template>
										<template #num>
											<van-stepper
												v-model.number="item_good.num"
												disable-input
												:max="5"
												input-width="1.014493rem"
												button-size=".57971rem"
												@plus="plusNum(item_good.id)"
												@minus="minusNum(item_good.id)"
											/>
										</template>
									</van-card>
								</div>
							</template>
						</van-cell>
					</van-cell-group>
				</van-checkbox-group>
			</div>
		</div>
		<div v-show="invalid_goods_list.length !== 0" v-for="item of invalid_goods_list" :key="item.id">
			<div class="display good-card-invalid">
				<div class="title font-size-14 font-weight-500">{{ `${item.title_name}` }}</div>
				<span class="font-color-red font-size-14" @click="clearInvalidGoods">清空</span>
			</div>
			<div class="good-card">
				<van-checkbox-group v-model="invalid_result" :ref="`checkboxGroup${item.id}`">
					<van-cell-group :border="false">
						<van-cell
							class="good-card-cell"
							:border="false"
							v-for="item_good in item.goods"
							clickable
							:key="item_good.id"
							@click="invalidToggle(item_good.id)"
							center
						>
							<template #title>
								<van-checkbox :name="item_good.id" checked-color="black" ref="checkboxes" />
							</template>
							<template v-slot:default>
								<div class="card-intro">
									<van-card desc="商品已卖光">
										<template #thumb>
											<div class="card-intro-invalid">
												<van-image
													width="100%"
													height="100%"
													fit="contain"
													:src="item_good.img"
													class="card-intro-invalid__img"
												/>
												<div class="display-center card-intro-invalid__text">
													<h5 style="color: #ffffff">商品已卖光</h5>
												</div>
											</div>
										</template>
									</van-card>
								</div>
							</template>
						</van-cell>
					</van-cell-group>
				</van-checkbox-group>
			</div>
		</div>
		<div class="pay-submit">
			<van-submit-bar
				class="pay-submit-order"
				:button-color="isEditStatus ? 'black' : 'linear-gradient(to right, #ff6034, #ee0a24)'"
				text-align="left"
				:button-text="isEditStatus ? '删除' : '结算 '"
				@submit="isEditStatus ? goDelete() : goPay()"
			>
				<template v-slot:default>
					<div class="pay-submit-order__label">
						<van-checkbox v-model="all_checked" checked-color="black" @click="checkAll">全选</van-checkbox>
						<div class="pay-submit-order__edit" @click="goEdit">
							<van-image
								width=".458937rem"
								height=".458937rem"
								fit="contain"
								:src="require('@/assets/icon/bianji@3x.png')"
							/>
							<span class="font-size-12">{{ isEditStatus ? '完成' : '编辑' }}</span>
						</div>
					</div>
				</template>
			</van-submit-bar>
			<div class="placeholder"></div>
		</div>
	</div>
</template>

<script>
import payCheck from '@/components/payCheck';
import TopHeader from '@/components/TopHeader';

export default {
	name: 'index',
	components: {
		payCheck,
		TopHeader,
	},
	data() {
		return {
			valid_goods_list: [ //有效商品列表
				{
					id: 1,
					status: true,
					title_name: '三只松鼠官方旗舰店',
					goods: [
						{
							id: 35,
							name: '绝味鸭舌',
							num: 1,
							img: require('@/assets/image/xiaotu@3x.png'),
						},
						{
							id: 3,
							name: '麻辣零食大礼包',
							num: 2,
							img: require('@/assets/image/xiaotu@3x.png'),
						},
						{
							id: 4,
							name: '咖啡',
							num: 3,
							img: require('@/assets/image/xiaotu@3x.png'),
						},
					],
				},
				{
					id: 2,
					status: true,
					title_name: '钟薛高官方旗舰店',
					goods: [
						{
							id: 5,
							name: '绝味鸭舌',
							num: 3,
							img: require('@/assets/image/xiaotu@3x.png'),
						},
						{
							id: 6,
							name: '绝味鸭舌',
							num: 2,
							img: require('@/assets/image/xiaotu@3x.png'),
						},
						{
							id: 7,
							name: '绝味鸭舌',
							num: 1,
							img: require('@/assets/image/xiaotu@3x.png'),
						},
						{
							id: 8,
							name: '绝味鸭舌',
							num: 3,
							img: require('@/assets/image/xiaotu@3x.png'),
						},
						{
							id: 9,
							name: '绝味鸭舌',
							num: 2,
							img: require('@/assets/image/xiaotu@3x.png'),
						},
					],
				},
			],
			invalid_goods_list: [ //失效商品列表
				{
					id: 3,
					status: false,
					title_name: '失效商品3件',
					goods: [
						{
							id: 13,
							name: '绝味鸭舌',
							img: require('@/assets/image/xiaotu@3x.png'),
						},
						{
							id: 14,
							name: '绝味鸭舌',
							img: require('@/assets/image/xiaotu@3x.png'),
						},
						{
							id: 15,
							name: '绝味鸭舌',
							img: require('@/assets/image/xiaotu@3x.png'),
						},
					],
				},
			],
			valid_result: [], //有效选中v-model
			invalid_result: [], //无效选中v-model
			valid_list_length: '', //有效商品列表长度
			invalid_list_length: '', //无效商品列表长度
			all_checked: false, //全选check
			isEditStatus: false, //编辑标识
		};
	},
	mounted() {
		this.valid_list_length = this.getGoodsSum(this.valid_goods_list);
		this.invalid_list_length = this.getGoodsSum(this.invalid_goods_list);
	},
	methods: {
		validToggle(id) { //有效商品选取
			console.log(id);
			const INDEX = this.valid_result.indexOf(id);
			if (INDEX === -1) this.valid_result.push(id);
			else this.valid_result.splice(INDEX, 1);
			if (this.valid_list_length === this.valid_result.length) {
				this.all_checked = true;
			} else {
				this.all_checked = false;
			}
		},
		invalidToggle(id) { //无效商品选取
			console.log(id);
			const INDEX = this.invalid_result.indexOf(id);
			if (INDEX === -1) this.invalid_result.push(id);
			else this.invalid_result.splice(INDEX, 1);
		},
		goEdit() { //编辑按钮
			this.isEditStatus = !this.isEditStatus;
		},
		goPay() {
			//结算
			console.log('pay');
		},
		getGoodsSum(array) { //获取商品总数
			let temporary_array = [];
			array.forEach((x) => {
				x.goods.forEach((y) => {
					temporary_array.push(y.id);
				});
			});
			return temporary_array.length;
		},
		goDelete() {
			//删除
			this.valid_goods_list.forEach((x) => {
				//删单品
				x.goods = x.goods.filter((y) => {
					return !this.valid_result.includes(y.id);
				});
				//删商铺
				this.valid_goods_list = this.valid_goods_list.filter((z) => {
					return z.goods.length !== 0;
				});
			});

			this.invalid_goods_list.forEach((x) => {
				//删单品
				x.goods = x.goods.filter((y) => {
					return !this.invalid_result.includes(y.id);
				});
				//删商铺
				this.invalid_goods_list = this.invalid_goods_list.filter((z) => {
					return z.goods.length !== 0;
				});
			});
		},
		checkAll() {
			//全选与否
			if (this.all_checked) {
				this.valid_goods_list.forEach((x) => {
					x.goods.forEach((y) => {
						this.valid_result.push(y.id);
					});
				});
			} else {
				this.valid_result = [];
			}
		},
		clearInvalidGoods() {
			//清空失效
			this.$dialog
				.confirm({
					title: '确认清空所选失效商品？',
				})
				.then(() => {
					this.invalid_goods_list = [];
				})
				.catch(() => {
					this.$toast({ message: '取消清空', duration: '1000' });
				});
		},
		plusNum(id) { //数量加
			event.stopPropagation();
			console.log(id);
		},
		minusNum(id) { //数量减
			event.stopPropagation();
			console.log(id);
		},
	},
};
</script>

<style lang="scss" scoped>
@import 'index.scss';
</style>
